<template>
    <div>
      <h2>酒店房间详情</h2>
      <el-table :data="roomList" stripe>
        <el-table-column label="房间类型" prop="roomType" />
        <el-table-column label="价格（元）" prop="price" />
        <el-table-column label="剩余数量" prop="quantity" />
        <el-table-column label="设施信息" prop="amenities" show-overflow-tooltip />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="success" @click="gotoBookRoom">预订房间</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import request from '@/utils/request.js';
  import { ElMessage } from 'element-plus';
  
  const router = useRouter();
  const route = useRoute();
  const roomList = ref([]);
  
  // 加载房间列表（根据酒店 ID）
  onMounted(async () => {
    const hotelId = route.params.hotelId;
    try {
      const res = await request.get(`/room/selectByHotelId/${hotelId}`);
      roomList.value = res.data;
    } catch (error) {
      ElMessage.error('加载房间详情失败');
    }
  });
  
  // 跳转到预订房间页
  const gotoBookRoom = () => {
    const hotelId = route.params.hotelId;
    router.push(`/front/book-room/${hotelId}`);
  };
  
  
  </script>
  
  <style scoped>
  /* 可选样式 */
  </style>